<template>
  <bkCard>
    <template #header>
      <div>
        <span class="mr10">今天你快乐吗</span>
        <bk-icon class="mr10" type="arrows-down-shape" />
        <bk-icon class="mr10" type="heart-shape" />
        <bk-icon class="mr10" type="star-shape" />
        <bkButton>回答</bkButton>
      </div>
      <div>
        <span class="mr10">提问者：xx</span>
        <span>点赞数：xx</span>
      </div>
    </template>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <bk-pagination
      type="compact"
      align="right"
      :current.sync="defaultPaging.current"
      :count.sync="defaultPaging.count"
      :limit="defaultPaging.limit"
      :show-limit="false"
    >
    </bk-pagination>
  </bkCard>
</template>

<script setup>
import { ref } from "vue";
import { bkCard, bkIcon, bkButton, bkPagination } from "bk-magic-vue";
const defaultPaging = ref({
  current: 1,
  limit: 10,
  count: 300,
});
</script>

<style scoped lang="less">
::v-deep .bk-card-head {
  height: auto;
}
</style>
